<template>
  <div>
  <el-tabs type="border-card" v-model="id" @tab-click="handleClick">
  <el-tab-pane label="全部"></el-tab-pane>
  <el-tab-pane :label="i.name" v-for="(i,j) in list_xc" :key="j"></el-tab-pane>
  <div>
    <table align="center" width="800">
        <tr>
            <th>编号</th>
            <th>图片</th>
            <th>图片名称</th>
            <th>所属相册</th>
            <th>操作</th>
        </tr>
        <tr v-for="(k,v) in list_tp" :key="v">
            <td>{{k.id}}</td>
            <td><el-image
                style="width: 100px; height: 100px"
                :src="url">{{k.url}}</el-image>
            </td>
            <td>{{k.name}}</td>
            <td>{{k.x_id}}</td>
            <td><el-button @click="shan(k.id)">删除</el-button></td>
        </tr>
    </table>
  </div>
  <el-upload
  class="upload-demo"
  action="#"
  :before-upload="upload"
  >
  <img :src="scurl" width="100" height="100">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  <p>添加相册</p>
  <p>相册编号<input type="text" v-model="xc.id"></p>
  <p>相册名称<input type="text" v-model="xc.name"></p>
  <p><el-button @click="addxc">添加</el-button></p>
  <p>添加图片</p>
  <p>图片编号<input type="text" v-model="tp.id"></p>
  <p>图片路径<input type="text" v-model="tp.url"></p>
  <p>图片名称<input type="text" v-model="tp.name"></p>
  <p>所属相册<input type="text" v-model="tp.x_id"></p>
  <p><el-button @click="addtp">添加</el-button></p>
</el-tabs>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list_xc:[],
            list_tp:[],
            xc:{
                id:"",
                name:""
            },
            tp:{
                id:"",
                url:"",
                name:"",
                x_id:""
            },
            scurl:"",
            url:"http://127.0.0.1:5000/static/1.jpg",
            id:"",
        }
    },
    mounted(){
        this.hqxc()
        this.hqtp()
    },
    methods:{
        upload(file){
            var data = new FormData()
            data.append('file',file)
            this.axios.post('user/upload',data).then(res=>{
                this.url = res.data.url
            })
        },
        handleClick() {
        console.log();
            this.axios.get('user/leiindex/'+this.id).then(res=>{
                this.tp_list = res.data.data
                this.hqxc()
            })
        },
        hqxc(){
            this.axios.get('user/xcindex').then(res=>{
                this.list_xc = res.data.data
            })
        },
        hqtp(){
            this.axios.get('user/tpindex').then(res=>{
                this.list_tp = res.data.data
            })
        },
        shan(id){
            this.axios.delete('user/deltp/'+id).then(res=>{
                console.log(res)
                this.hqtp()
                alert('删除成功')
            })
        },
        addxc(){
            this.axios.post('user/addxc',this.xc).then(res=>{
                console.log(res)
                this.hqxc()
                alert('添加相册成功')
            })
        },
        addtp(){
            this.axios.post('user/addtp',this.tp).then(res=>{
                console.log(res)
                this.hqtp()
                alert('添加图片成功')
            })
        },

    }

}
</script>

<style>

</style>